/* Your app custom styles here */

$radius: 10px;
$colorBlack: #000;
$colorGrey: #aaa;
$colorGrey2: #ebebed;
$color8b: #8b8b8b;
$padding: 30px;
$padding20: 20px;
$mainColor:#1898ff;
$dieColor: #f95353;
$zhangColor: #00bf84;
$mainColor2: #354364;
$borderColor: #e6e6e6;
.h1 {
  font-size: 60px;
}

.zhang {
  color: $mainColor!important;
}
.die {
  color: $dieColor!important;
}
.margin-t0 {
  margin-top: 0!important;
}

.margin-b20 {
  margin-bottom: 20px!important;
}
.margin-t20 {
  margin-top: 20px!important;
}
.margin-t30 {
  margin-top: 30px!important;
}
.margin-t80 {
  margin-top: 80px!important;
}
.no-border-radius {
  border-radius: 0!important;
}

.border-right {
  border-right: 1px solid $borderColor;
}
.no-more-tips {
  text-align: center;
  padding: $padding;
  color: $colorGrey;
}
.bg-color-transparent {
  background: transparent!important;
  .navbar-bg {
    background: transparent!important;
    backdrop-filter: none;
  }
  color: #fff;
  &.navbar .icon-back:after {
    color: #fff;
  }
  .link {
    color: #fff;
  }
}
.navbar {
  .title {
    font-weight: 500;
  }
  .navbar-bg {
    background-color: rgba(255,255,255,.8);
  }
  .icon-back:after{
    font-family: 'iconfont';
    content: '\e892';
    font-size: 40px;
    color: #000;
  }
  .iconfont {
    font-size: 35px;
    color: #8f9eaa;
  }
}
.ios-translucent-bars .toolbar {
  background-color: rgba(255,255,255,.8);
}
.upload-box {
  background: #fff;
  padding: $padding;
  > div {
    background: #f5f5f7;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    p {
      &:last-child {
        color: $colorGrey;
        padding-top: 10px;
      }
    }
  }
}
.content-padding {
  .custom-input {
    margin-bottom: $padding20;
  }
}
.ios-translucent-bars .subnav-tabs {
  @extend .ios-translucent;
  /deep/ .van-tabs__nav {
    background-color: transparent;
  }
  .van-tabs {
    width: 100%;
  }
}
.login-register-content {
  h1 {
    margin: $padding 0;
  }
  > .links-box {
    display: flex;
    justify-content: space-between;
  }
  .buttons-box {
    margin-top: 80px;
    .button:last-child {
      margin-top: $padding20;
    }
  }
}
.my-card {
  background: #fff;
  box-shadow: 0 0 50px 0 rgba(0,0,0,.03);
  padding: 40px $padding;
  border-radius: $radius;
  font-size: 28px;
  overflow: hidden;
}
.tips-container {
  padding: $padding20;
  margin-top: $padding20;
  background: #fff;
}
.my-table {
  text-align: center;
  margin: $padding;
  padding: $padding;
  background: #fff;
  box-shadow: 0 0 50px 0 rgba(0,0,0,.03);
  border-radius: $radius;
  .table-title {
    padding-bottom: $padding20;
    color: $mainColor2;
    border-bottom: 1px solid $mainColor2;
  }
  .table-data {
    padding: $padding20 0;
    border-bottom: 1px solid $borderColor;
    &:last-child {
      border: none;
    }
  }
}

.orders-list {
  li {
    background: #fafafa;
    margin-bottom: $padding20
  }
  .status-p{
    color: $mainColor2;
    padding: $padding $padding 0 $padding;
    font-size: 28px;
    display: flex;
    justify-content: space-between;
  }
  .order-price {
    color: $mainColor;
  }
  .van-button {
    width: auto;
  }
}
.pay-types-imgs-box {
  img {
    width: 35px;
    margin-left: 5px;
  }
}
.c2c-order-details-header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.game-row {
  text-align: center;
  border-top: 1px solid $borderColor;
  border-bottom: 1px solid $borderColor;
  padding: $padding20 0;
  margin-top: $padding20;
  .col:first-child {
    border-right: 1px solid $borderColor;
  }

}
/*自定义F7样式开始*/
.login-screen > .view > .page .page-content {
  margin: 0!important;
}
.page {
  background: #f5f5f7;
}
.block-title {
  margin: 30px;
}
.link {
  color: $mainColor;
}
.button {
  &.color-blue {
    background: $mainColor;
    color: #fff;
  }
  &.color-white {
    color: #4e4e4e;
  }
  &.active-state {
    opacity: .7;
  }
}
.swiper-container {
  height: 100%;
  img {
    height: 100%;
  }
}
.list {
  margin: 0;
  ul {
    &:before,&:after {
      display: none!important;
    }
  }
  .item-content {
    min-height: 120px;
  }
  .iconfont {
    color: $mainColor;
    font-size: 40px;
  }
  .item-title {
    font-size: 28px;
  }
  .item-media {
    img {
      width: 50px;
    }
  }
  input {
    font-size: 30px!important;
  }
  .item-input {
    .item-title {
      font-size: 20px;
      color: $mainColor2;
    }
    input {
      font-size: 30px;
      color: $mainColor2;
    }
  }
}
.ios-translucent {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
}
.panel-backdrop {
  background: rgba(0,0,0,.5)!important;
}

.filter-toolbar {
  .toolbar-inner {
    padding: 0;
  }
  .button {
    flex: 1;
    height: 100%;
    line-height: 44PX;
    &.no-border-radius {
      background-color: #5888ee;
    }
  }
}
.navbar .txt-button {
  font-size: 28px;
  color: #000;
}
.my-sheet {
  height: 280PX;
}
.line-input-f7-list-item {
  .item-after {
    flex: 1;
    padding-left: $padding;
  }
}

.bottom-buttons-toolbar {
  /deep/ .toolbar-inner {
    padding: 0!important;
  }
  .button {
    flex: 1;
    height: 100%;
    line-height: 44PX;
    &:first-child{
      border-right: 1px solid #ecebef;
    }
  }
}

.product-item {
  padding: $padding20;
  border-radius: $radius;
  justify-content: flex-start;
  display: flex;
  background: #fff;
  box-shadow: 0 0 50px 0 rgba(0,0,0,.03);
  color: #000;
  img {
    width: 200px;
    height: 200px;
    border-radius: $radius;
  }
  > div {
    margin-left: $padding20;
    flex: 1;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    h3 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      color: $mainColor2;
      font-size: 26px;
    }
    h2 {
      color: $mainColor;
    }
    p {
      color: $colorGrey;
    }
  }
}
.navbar .navbar-bg {
  background: #fff;
}
/*自定义F7样式结束*/

/*自定义vant样式开始*/
.van-popup {
  background: transparent;
  width: 100%;
  z-index: 9999!important;
}
.van-button--info {
  background-color: $mainColor;
  border-color: $mainColor;
}
.van-toast {
  z-index: 99999!important;
}
.van-overlay {
  z-index: 9998!important;
}
.van-dialog {
  z-index: 99999!important;
}
.van-button {
  //width: auto;
  padding: 0 20px;
}
.van-address-list__bottom {
  .van-button {
    width: 100%;
  }
}
/*自定义vant样式结束*/

/*清除一些html默认样式*/
body, ul, li, p, dl, dt, dd, label, span, h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
  font-weight: normal;
  //color: #fff;
}

li {
  list-style: none;
}
i{
  font-style: normal;
}
a {
  text-decoration: none;
  outline: none;
  //color: #fff;
  /*&.link{
    color: #000;
  }*/
}
img {
  border: none;
  width: 100%;
}
.content-padding{
  padding-left: 30px!important;
  padding-right: 30px!important;
}
.no-margin{
  margin: 0!important;
}

.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.clearfix:after{
  display: block;
  content:'';
  clear: both;
}
.file-position {
  position: relative;
  input[type='file'] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
  }
  > .show-img-box {
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}

input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
  color: #a6a6a6;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
  color: #a6a6a6;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
  color: #a6a6a6;
}
input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
  color: #a6a6a6;
}
